import React from 'react';

import PartTitle from './components/title.jsx';
import EchartBars from './components/echartBars.jsx';
import EchartPie from './components/echartPie.jsx';
import EchartStackBars from './components/echartStackBar.jsx';

import Request from '@service/ajax.js';
import {HOMEAPIS} from '@apis/index.js';
import {DataTypes, Ranks} from '@assets/config/global_config.js';
import Tools from '@untils/tools.jsx';
import './scss/home.scss';

const _req = new Request();

export default class Home extends React.Component {

    constructor(props) {
        super(props);
        this.state = {};
        this.changeOnce = null;
        this.echartBarNode = null;
        this.echartPieNode = null;
        this.echartStackBarNode = null;
        this.setCallback = Tools.setCallback.bind(this);
    }

    mutationCb() {
        clearTimeout(this.changeOnce);
        this.changeOnce = setTimeout(() => {
            let echartNode = this.echartBarNode;
            let echartPieNode = this.echartPieNode;
            let echartStackBarNode = this.echartStackBarNode;

            echartNode && echartNode.historyEchart.resize();
            echartPieNode && echartPieNode.systemEchart.resize();
            echartStackBarNode && echartStackBarNode.systemBarEchart.resize();
        }, 30);
    }

    componentDidMount() {
        let options = {
            selector: '#nav-left',
            config: {
                attributes: true,
                attributeOldValue: true,
                atttributeFilter: ['style']
            }
        };
        Tools.mutation(this, options, this.mutationCb);
        window.onresize = this.mutationCb.bind(this);
        this.requestCountData();
        this.requestRankList();
    }

    //今日数据 与 历史数据
    requestCountData() {
        _req.axios(HOMEAPIS.CountData).then(data => {
            this.setCallback(data);
        }, err => {
            Tools.tooltip({level: 'error', content: err.message});
        })
    }

    // 获取排行榜
    requestRankList(n) {
        clearTimeout(this.rollPoll);
        let options = Tools.objectAssign(HOMEAPIS.RankList, {data: {num: n}});
        _req.axios(options).then(data => {
            this.setCallback(data);
        }, err => {
            Tools.tooltip({level: 'error', content: err.message});
        })
    }

    componentWillUnmount() {
        this.observer.disconnect();
        window.onresize = null;
    }

    render() {
        let {today = {}, moveX = 0, history = [], system = null} = this.state;
        let dealCount = (today.tvDeal >= 0 && today.radioDeal >= 0 && today.mediaDeal >= 0) ? (today.tvDeal + today.radioDeal + today.mediaDeal) : '---';

        return (
            <div id="home-page" className="home-page">
                <div className="left-content">
                    <div className="content-top today">
                        <PartTitle title='当日数据' pointerBg='range'/>
                        <div className="part-content">
                            <div className="today-data">
                                <div className="count-data">
                                    <i className="meddle-line"> </i>
                                    <div className="part-one">
                                        <p className="type-num">{Tools.formatNumber(today['analyzeDuration'] || '')} h</p>
                                        <p className="type-name">当日检测问题数据总时长</p>
                                    </div>
                                    <div className="part-one">
                                        <p className="type-num">{Tools.formatNumber(dealCount)} h</p>
                                        <p className="type-name">已处理问题数据</p>
                                    </div>
                                </div>
                                <div className="detail-data-box">
                                    {
                                        Object.keys(DataTypes).map((item, index) => {
                                            let itemdata = today[item + 'Deal'] || '';
                                            return (
                                                <dl className="item-data" key={index}>
                                                    <dt className={`${item}-icon`}></dt>
                                                    <dd className="data-num">
                                                        <p className="data-name">{DataTypes[item]}已处理</p>
                                                        <p className="detail-num">{Tools.formatNumber(itemdata)} h</p>
                                                    </dd>
                                                </dl>
                                            )
                                        })
                                    }
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="content-bottom">
                        <PartTitle title='历史数据' pointerBg='red'/>
                        <div className="part-content">
                            {
                                history.length
                                    ? <EchartBars ref={node => this.echartBarNode = node}
                                        data={history}/>
                                    : null
                            }
                        </div>
                    </div>
                </div>
                <div className="right-content">
                    <div className="content-top">
                        <PartTitle title='热点排行'
                                   pointerBg='sky-blue'>
                            <div className="search-types">
                                <div className="types-content">
                                    <i className="move-box" style={{left: `${80 * moveX}px`}}> </i>
                                    {
                                        Object.keys(Ranks).map((item, index) => {
                                            return (
                                                <span key={index}
                                                      className={`type-cut-btn ${moveX === index ? 'active' : ''}`}
                                                      onClick={() => this.setCallback({moveX: index})}>{Ranks[item]}</span>
                                            )
                                        })
                                    }
                                </div>
                            </div>
                        </PartTitle>
                        <div className="part-content">
                            <div className="message-content">
                                <div className="list-content" style={{left: `${-100 * moveX}%`}}>
                                    {
                                        Object.keys(Ranks).map((item, index) => {
                                            let currentItem = this.state[item] || [];
                                            let sortResult = Tools.arrLargest(currentItem, 'reviewed');

                                            if (!currentItem.length)
                                                return null;
                                            return (
                                                <div className="rank-lists" key={index}>
                                                    {
                                                        sortResult.result.map((rank, r) => {
                                                            let percent = `${(rank.reviewed * 100) / sortResult.largest}%`;
                                                            return (
                                                                <dl className="list-item" key={r}>
                                                                    <dd className="hot-name">{rank.name}</dd>
                                                                    <dt className="hot-precent">
                                                                        <span className="process"
                                                                              style={{width: percent}}> </span>
                                                                    </dt>
                                                                    <dl className="pointer-count">
                                                                        <span className='txt-1'>点击：</span>
                                                                        <span className="num">{rank.reviewed}</span>
                                                                        <span className="txt">次</span>
                                                                    </dl>
                                                                </dl>
                                                            )
                                                        })
                                                    }
                                                </div>
                                            )
                                        })
                                    }
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="content-bottom">
                        <PartTitle title='系统监测数据' pointerBg='sky-blue'/>
                        <div className="part-content">
                            <div className="left-pie">
                                <div className="echart-box">
                                    {
                                        system
                                            ? <EchartPie ref={node => this.echartPieNode = node}
                                                data={system}/>
                                            : null
                                    }
                                </div>
                            </div>
                            <div className="right-bar">
                                <div className="echart-box">
                                    {
                                        system
                                            ? <EchartStackBars ref={node => this.echartStackBarNode = node}
                                                data={system}/>
                                            : null
                                    }
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
